<template>
  <div class="pwdback">
    <head_>
      <h1>密码找回</h1>
    </head_>
    <div class="inp">
      <label for="phone">手机号</label>
      <input
        type="text"
        placeholder="请输入手机号"
        id="phone"
        v-model="phone"
        @blur="changepin"
      />
    </div>


    <div class="pin">
      <label for="pin">验证码</label>
      <input v-model="pin" type="text" placeholder="请输入验证码" id="pin" />
      <button
              v-show="show" type="primary" @click="getpin" style="color: #0c67f9"
      >
        发送验证码
      </button>
      <button
              v-show="!show" disabled  style="color: #8d8d8d"
      >
        {{count}}后发送
      </button>
    </div>

    <div class="inp">
      <label for="newpwd">新密码</label>
      <input v-model="newpw" :type="flas ? tests : pass" placeholder="请输入新密码" id="newpwd" />
      <van-icon @click="eye_active" :class="flas ? 'eye_active' : ''" name="eye-o" size="0.36rem" />
    </div>

    <div class="inp">
      <label for="sure">确认</label>
      <input :type="flas2 ? tests : pass" v-model="surepw" placeholder="再次输入新密码" id="sure" />
      <van-icon @click="eye_active2" :class="flas2 ? 'eye_active' : ''" name="eye-o" size="0.36rem" />
    </div>

    <div class="submit">
      <button @click="submit" :disabled="submitdisplay" :class="[submitcolor == true ? 'submit_active' : '']">
        提交
      </button>
    </div>
  </div>
</template>

<script>
import head_ from "../jingtai_/header";
import { getCode, backPwd, checkPhoneNumUnique } from "../../request/login_register/login_register";
export default {
  props: {},
  data() {
    return {
      count:'',
      timer:null,
      show:true,
      phone: "",
      pin: "",
      newpw: "",
      surepw: "",
      password: "",
      phoneNum:"",
      pintext: "获取验证码",
      pincolor: false,
      display: true,
      timerid: null,
      time: 0,
      flas: false,
      pass: "password",
      tests: "text",
      flas2: false,
      submitdisplay: false,
      submitcolor: true,
      regphone: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
      regpw: /^[\w]{6,16}$/,
    };
  },
  methods: {
    changepin() {
      this.pincolor = true;
      this.display = false;
      //电话号码为唯一性校验
      checkPhoneNumUnique({ phone: this.phone }).then((res) => {
         if (res.code==5000){
           this.$toast.fail(res.msg)
           this.phone=""
         }else if (res.code==2000){
           this.$toast.success(res.msg)
         }
      });
    },
    getpin() {
      const num = 60;
      if (!this.timer) {
        this.count = num;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= num) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      //函数
      getCode({ phone: this.phone }).then((res) => {

      });
    },
    eye_active() {
      this.flas = !this.flas;
    },
    eye_active2() {
      this.flas2 = !this.flas2;
    },

    submit() {
      //alert(this.newpw)
      //alert(this.phone)
      //console.log("提交")
      if (this.regphone.test(this.phone) == false) {
        this.$toast.fail("请输入正确的手机号");
      } else if (this.pin.length !== 6) {
        this.$toast.fail("验证码为6位数字");
      } else if (this.regpw.test(this.pw) == false) {
        this.$toast.fail("密码格式不正确");
      } else if (this.newpw != this.surepw) {
        this.$toast.fail("两次密码输入不一致");
      } else {
        backPwd({
          password: this.newpw,
          phoneNum: this.phone,
          code: this.pin
        }).then((res) => {
          if (res.code==5000){
            this.$toast.fail("验证码错误")
          }else if (res.code==2000){
            this.$toast.success({
              message:"修改成功",
              duration:2000,
              onClose:(res)=>{
                return this.$router.push("/login")
              }
            })
          }
        });
      }
    },
    // updated() {

    //   if (
    //     this.phone != "" &&
    //     this.pin != "" &&
    //     this.pw != "" &&
    //     this.surepw != ""
    //   ) {
    //     this.submitdisplay = false;
    //     this.submitcolor = true;
    //   } else {
    //     this.submitcolor = false;
    //     this.submitdisplay = true;
    //   }
  },
  components: { head_ },
};
</script>

<style scoped lang="less">
.pwdback {
  padding: 0 0.24rem;

  .title {
    display: flex;
    align-items: center;
    height: 0.88rem;
  }

  span {
    flex: 1;
    text-align: center;
    font-size: 0.34rem;
    font-weight: bolder;
  }

  .inp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;
    position: relative;

    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }

    input {
      width: 5.48rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;

      &::placeholder {
        color: #999;
      }
    }

    .van-icon-eye-o {
      position: absolute;
      top: 0.2rem;
      right: 0.19rem;
    }

    .eye_active {
      color: #2094ff;
    }
  }

  .pin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.29rem;

    label {
      font-size: 0.26rem;
      font-weight: bolder;
    }

    input {
      width: 2.98rem;
      height: 0.66rem;
      font-size: 0.22rem;
      padding-left: 0.19rem;
      margin-left: 0.2rem;
      border: 2px solid #e4e4e4;
      border-radius: 0.04rem;

      &::placeholder {
        color: #999;
      }
    }

    button {
      width: 2rem;
      height: 0.66rem;
      font-size: 0.22rem;
      color: #999;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 0.66rem;
      outline: none;
      border: none;
    }

    .button_active {
      background: #43a5ff;
      color: #fff;
    }
  }

  .submit {
    margin-top: 1.29rem;
    text-align: center;

    button {
      width: 5rem;
      height: 1rem;
      color: #999;
      background: #f2f2f2;
      font-size: 0.34rem;
      text-align: center;
      line-height: 1rem;
      border: none;
      outline: none;
    }

    .submit_active {
      background: #43a5ff;
      color: #fff;
    }
  }
}
</style>
